<route lang="json5">
{
  meta: {
    auth: true,
    label: '用户管理',
  },
}
</route>

<template>
  <div class="h-full flex flex-col">
    <div class="flex items-center overflow-x-scroll">
      <a-form :model="filterInfo" layout="inline">
        <a-form-item field="str1" label="str1">
          <a-input v-model="filterInfo.str1" placeholder="please enter str1" />
        </a-form-item>
      </a-form>
      <a-button @click="handleOpenModal()" status="warning" class="mr-2">新增</a-button>
      <a-button @click="getData" :loading="inLoading">刷新</a-button>
    </div>
    <use-n-progress :inanimate="inDebounce" />
    <a-table
      row-key="id"
      class="!h-0 flex-1"
      :scroll="{ y: '100%', x: '100%' }"
      :pagination="pagination"
      :data="dataList"
      :loading="inLoading"
      :row-selection="{
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false, // false:切换页面时依旧可以选择   true:传统模式
      }"
      v-on="handlePageChange"
      v-model:selected-keys="selectedKeys"
      :columns="[
        { title: '名称', dataIndex: 'name', width: 100 },
        { title: '角色', dataIndex: 'role', width: 100 },
        { title: '账号', dataIndex: 'account', width: 100 },
        { title: '状态', slotName: 'status', width: 80 },
        { title: '备注', dataIndex: 'remark', width: 100 },
        { title: '操作', slotName: 'tools', width: 130, fixed: 'right', align: 'center' },
      ]"
    >
      <template #status="{ record }">
        <common-status-tag :value="record.status" />
      </template>

      <template #tools="{ record }">
        <a-button class="mr-2" title="编辑" @click="handleOpenModal(record)">
          <template #icon>
            <Icon icon="ant-design:edit-twotone" />
          </template>
        </a-button>
        <a-button class="mr-2" title="重置密码" @click="handleResetPassword(record)">
          <template #icon>
            <Icon icon="ant-design:reload-outlined" />
          </template>
        </a-button>
      </template>
    </a-table>

    <render-table-select-tool :edit="(ids:any)=>handleOpenModal({ids})" />

    <!-- 编辑/新增用户 -->
    <a-modal width="auto" v-model:visible="visible" title-align="start" draggable :on-before-ok="handleSubmit">
      <template #title>{{ isGroupEdit ? '批量编辑' : (formData.id ? '编辑' : '新增') + '菜单' }}</template>
      <a-form ref="editFormRef" auto-label-width :model="formData" :style="{ width: '480px' }">
        <a-form-item v-if="!isGroupEdit" field="name" label="名称" :rules="{ required: true, message: '名称必填！' }">
          <a-input v-model="formData.name" />
        </a-form-item>
        <a-form-item
          v-if="!isGroupEdit"
          field="account"
          label="账号"
          :rules="{ required: true, message: '账号必填！' }"
        >
          <a-input v-model="formData.account" />
        </a-form-item>
        <a-form-item field="role" label="角色">
          <a-input v-model="formData.role" />
          <template v-if="isGroupEdit" #extra>
            <a-checkbox>提交</a-checkbox>
          </template>
        </a-form-item>
        <a-form-item field="status" label="启用">
          <a-switch
            v-model="formData.status"
            type="round"
            checked-text="启用"
            unchecked-text="隐藏"
            :checked-value="1"
            :unchecked-value="0"
          />
          <template v-if="isGroupEdit" #extra>
            <a-checkbox>提交</a-checkbox>
          </template>
        </a-form-item>

        <a-form-item field="remark" label="备注">
          <a-textarea
            v-model="formData.remark"
            :auto-size="{
              minRows: 2,
              maxRows: 5,
            }"
          />
          <template v-if="isGroupEdit" #extra>
            <a-checkbox>提交</a-checkbox>
          </template>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="tsx" setup>
import { getUserList } from 'api/test1'
import { cloneDeep } from 'lodash-es'

type IItem = Record<'name' | 'remark' | 'account', string> & {
  id?: string
  ids?: string[]
  role?: string
  status?: 0 | 1
}

const router = useRouter()
const DefaultFilter = {
  str1: '',
  str2: '',
  type1: 0,
  type2: 0,
  date1: '',
  date2: [],
}

const DEFAULT_FORM: IItem = {
  id: undefined,
  ids: undefined,
  name: '',
  remark: '',
  role: undefined,
  status: undefined,
  account: '',
}
const visible = ref(false)
const editFormRef = ref()
const formData = reactive(cloneDeep(DEFAULT_FORM))
const isGroupEdit = computed(() => Boolean(Number(formData.ids?.length) > 1))
const { selectedKeys, RenderTableSelectTool } = useTableSelect()
const { dataList, filterInfo, inDebounce, pagination, handlePageChange, inLoading, getData } = useGetData<
  any,
  typeof DefaultFilter
>(getUserList, DefaultFilter, {})

async function handleOpenModal(row: any = {}) {
  Object.assign(formData, DEFAULT_FORM, row)
  editFormRef.value?.clearValidate()
  await nextTick()
  visible.value = true
}

async function handleResetPassword(row: any) {
  await useConfirm({
    message: '重置密码',
    deep: true,
  })
  await getUserList()
  Modal.success({ content: '重置成功' })
}

async function handleSubmit() {
  const error = await editFormRef.value.validate()
  if (error) return false
  console.log(formData)
  await getUserList()
}
</script>
